<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <div class="sidebar-container">
      <el-menu
        :default-active="currentActive"
        class="el-menu-vertical"
        background-color="#333"
        text-color="#fff"
        active-text-color="#ffc107"
        @select="handleMenuSelect"
        mode="vertical"
      >
        <!-- 添加网站标题 -->
        <div class="website-title">般铁锚机械网</div>
        
        <el-menu-item index="welcome">
          <el-icon><Monitor /></el-icon>
          <span>首页</span>
        </el-menu-item>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="userAll">用户列表</el-menu-item>
          <el-menu-item index="sellerQualificationAll">卖家资质审核</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><User /></el-icon>
            <span>业务员管理</span>
          </template>
          <el-menu-item index="businessmanAll">账户列表</el-menu-item>
          <el-menu-item index="businessmanXiaoShou">销售列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>设备管理</span>
          </template>
          <el-menu-item index="equipmentAll">设备列表</el-menu-item>
          <el-menu-item index="equipmentOrder">订单列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon><Monitor /></el-icon>
            <span>日常管理</span>
          </template>
          <el-menu-item index="purchaseInfo">求购信息</el-menu-item>
          <el-menu-item index="detectionReportAll">评估信息</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>
            <el-icon><CreditCard /></el-icon>
            <span>内容管理</span>
          </template>
          <el-menu-item index="articleAll">文章内容</el-menu-item>
          <el-menu-item index="articleCategoryAll">文章分类</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7">
          <template #title>
            <el-icon><Tools /></el-icon>
            <span>操作员管理</span>
          </template>
          <el-menu-item index="role">角色列表</el-menu-item>
          <el-menu-item index="operatorAll">用户管理（操作员）</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- 主内容区 -->
    <div class="main-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { User, Setting, Monitor, CreditCard, Tools, Calendar, ForkSpoon, Link } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router'; 

const currentActive = ref('');
const router = useRouter();

const handleMenuSelect = (index) => {
  currentActive.value = index;
  const routePath = index === '/#' ? '/' : `/home/${index}`;
  router.push(routePath);
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* .app-container { */
  /* display: flex;
  width: 100vw; */
  /* height: 100%; */
  /* overflow: hidden;
  box-sizing: border-box; */
/* } */

/* .main-container { */
  /* flex: 1;
  margin-left: 200px !important;
  min-height: 100vh;
  height: 100%;
  padding: 20px;
  background-color: #f5f7fa;
  overflow-y: auto;
  box-sizing: border-box; */
  /* padding: 20px; */
  /* background-color: #f5f7fa; */
/* } */

.app-container {
  display: flex; /* 启用Flex布局 */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}

.main-container {
  flex: 1; /* 主内容区占满剩余宽度 */
  min-height: 100vh;
  height: 100%;
  padding: 20px;
  background-color: #f5f7fa;
  overflow-y: auto;
  box-sizing: border-box;
}

.sidebar-container {
  width: 200px;
  height: 100vh;
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  box-sizing: border-box;
  border-right: none !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

.el-menu-vertical {
  border-right: none !important;
  height: 100%;
  padding-top: 0;
  margin: 0;
  overflow-y: auto;
  width: 100% !important;
  box-sizing: border-box !important;
}

.el-menu-item,
.el-sub-menu .el-sub-menu__title {
  padding: 0 20px !important;
  height: 56px;
  line-height: 56px;
  margin: 0 !important;
  border: none !important;
}

.el-menu-item:hover {
  background-color: #555 !important;
}

.website-title {
  color: #fff;
  font-size: 16px;
  text-align: center;
  padding: 18px 0;
  margin: 0;
  font-weight: bold;
  border-bottom: 1px solid #555;
  box-sizing: border-box;
}

/* 统一卡片组件样式 */
.card-component {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* 表格组件统一设置 */
.table-container {
  width: 100%;
  overflow: hidden;
}

.el-table {
  width: 100% !important;
  height: 100%;
  overflow: auto;
  table-layout: fixed;
}
</style>